<template>
  <div>
    <h1>后台权限</h1>
    <template>
      <!-- <el-button type="primary" style="margin-bottom:10px">添加新管理员</el-button> -->
        <el-table
          :data="tableData"
          border
          style="width: 100%"
          :row-style="{height:'80px'}"
          >
            <el-table-column
              prop="userId"
              label="id"
              width="120"
              align="center"
              >
            </el-table-column>
            <el-table-column
              prop="userName"
              label="管理员姓名"
              width="180"
              align="center">
            </el-table-column>
            <el-table-column
              prop="idCard"
              label="身份证号"
              width="220"
              align="center">
            </el-table-column>
            <el-table-column
              label="权限名称"
              width="880"
              align="center">
              <template slot-scope="scope">
                    <el-tag
                    v-for="item in scope.row.menus" :key="item.menuId"
                    disable-transitions
                    >{{item.title}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column
              prop="rolesname.roleName"
              label="角色身份"
              width="120"
              align="center">
            </el-table-column>
            <el-table-column
              label="操作"
              width="200"
              align="center">
              <template slot-scope="scope">
                  <el-button type="text" size="small" @click="qx(scope.row)">
                  <el-tag
                    type="success"
                    effect="dark">
                   授权
                  </el-tag>
                  </el-button>
              </template>
            </el-table-column>
          </el-table>
    </template>

    <template>
          <el-dialog title="权限" :visible.sync="sq" :close-on-click-modal="false" :before-close="handleClose">
                <el-tree
                ref="qx"
                :data="menues"
                node-key="menuId"
                show-checkbox 
                default-expand-all
                :default-checked-keys="checkKeys"
                >
                <template v-slot="d">
                        <span>
                            {{d.data.title}}
                        </span>
                </template>
                </el-tree>
                <template v-slot:footer>
                     <el-button @click="clickPermSubmit">确定</el-button>
                </template>
            </el-dialog>   
      </template>

  </div>
</template>

<script>
import Api from '@/api/afterUser/afterUserCRUD'
export default {
inject: ['reload'],
    data(){
      return{
        //全查user
        tableData:[],
        //授权对话框
        sq:false,
        //权限
        menues:[],
        //
        checkKeys:[],
        rolePerms:{roleId:undefined,permIds:[]},
      }
    },
    created(){
      this.fourQueryAdmin()
    },
    methods:{
      // 全查所有管理
        fourQueryAdmin(){
            Api.fourQueryAdmin().then(ref =>{
              this.tableData = ref.data.data
            }).catch(err =>{
              console.log('查询信息失败');
            })
        },
        // 授权的查询
        qx(row){
            const loading = this.$loading({
              lock: true,
              text: '玩命加载中...',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
            });
            setTimeout(() => {
              loading.close();
              /*打开对话框*/
              this.sq = true
            }, 400);

            // 打开对话框
            Api.fourQueryMenu().then(ref =>{
              this.menues = ref.data.data
            }).catch(err =>{
                this.$message("查询失败")
            })

            this.rolePerms.roleId = row.userId
            //先清空数据然后查出已有数据 赋值进去
            this.checkKeys = []

            for(var i=0; i < row.menus.length; i++){
                var key = row.menus[i].menuId
                this.checkKeys.push(key)
            }
        },
        // 关闭授权对话框的X
        handleClose(){
          this.sq = false
        },
        //授权对话框确认按钮
        clickPermSubmit(){
          var keys=this.$refs.qx.getCheckedNodes(false,true);
          var permIds = []
          keys.forEach(element => {
                permIds.push(element.menuId)
            });
            this.rolePerms.permIds = permIds
            Api.fourEditMenu(this.rolePerms).then(ref =>{
                  this.$message({message:'修改成功',type:'success'})
                }).catch(err =>{
                    this.$message("修改失败")
                })
            this.sq = false
            // this.reload()
            location.reload() 
       },
    },

}
</script>

<style>

</style>